//企业账户

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-card title="企业碳账户列表">
      <a-button type="primary" @click="addNewAccount" style="margin-bottom: 10px"
        >新增企业账户</a-button
      >
      <a-table :columns="columns" :dataSource="data" rowKey="name" bordered>
        <template #action="{ text, record }">
          <a-button type="link" @click="edit(record)">修改</a-button>
          <a-button type="link" @click="deleteRecord(record)">删除</a-button>
        </template>
      </a-table>
    </a-card>

    <a-modal
      v-model:visible="isModalVisible"
      title="新增/修改企业碳账户"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form" layout="vertical">
        <a-form-item label="企业名称" name="name">
          <a-input v-model="formData.name" placeholder="请输入企业名称" />
        </a-form-item>
        <a-form-item label="直接排放 - 燃料燃烧" name="directEmissionFuel">
          <a-input v-model="formData.directEmissionFuel" placeholder="单位：kg CO2" />
        </a-form-item>
        <a-form-item label="直接排放 - 工业过程" name="directEmissionIndustry">
          <a-input v-model="formData.directEmissionIndustry" placeholder="单位：kg CO2" />
        </a-form-item>
        <a-form-item label="直接排放 - 其他" name="directEmissionOther">
          <a-input v-model="formData.directEmissionOther" placeholder="单位：kg CO2" />
        </a-form-item>
        <a-form-item label="间接排放 - 电力使用" name="indirectEmissionElectricity">
          <a-input
            v-model="formData.indirectEmissionElectricity"
            placeholder="单位：kWh"
          />
        </a-form-item>
        <a-form-item label="间接排放 - 热力使用" name="indirectEmissionHeat">
          <a-input v-model="formData.indirectEmissionHeat" placeholder="单位：kWh" />
        </a-form-item>
        <a-form-item label="间接排放 - 其他" name="indirectEmissionOther">
          <a-input v-model="formData.indirectEmissionOther" placeholder="单位：kg CO2" />
        </a-form-item>
        <a-form-item label="生产排放 - 原材料使用" name="productionEmissionMaterials">
          <a-input
            v-model="formData.productionEmissionMaterials"
            placeholder="单位：kg CO2"
          />
        </a-form-item>
        <a-form-item label="生产排放 - 生产过程" name="productionEmissionProcess">
          <a-input
            v-model="formData.productionEmissionProcess"
            placeholder="单位：kg CO2"
          />
        </a-form-item>
        <a-form-item label="生产排放 - 产品运输" name="productionEmissionTransport">
          <a-input
            v-model="formData.productionEmissionTransport"
            placeholder="单位：kg CO2"
          />
        </a-form-item>
        <a-form-item label="供应链排放 - 供应商排放" name="supplyChainEmissionSuppliers">
          <a-input
            v-model="formData.supplyChainEmissionSuppliers"
            placeholder="单位：kg CO2"
          />
        </a-form-item>
        <a-form-item label="供应链排放 - 采购运输" name="supplyChainEmissionTransport">
          <a-input
            v-model="formData.supplyChainEmissionTransport"
            placeholder="单位：kg CO2"
          />
        </a-form-item>
        <a-form-item label="废弃处置排放 - 废弃物产生" name="disposalEmissionWaste">
          <a-input v-model="formData.disposalEmissionWaste" placeholder="单位：kg CO2" />
        </a-form-item>
        <a-form-item label="废弃处置排放 - 回收利用" name="disposalEmissionRecycle">
          <a-input
            v-model="formData.disposalEmissionRecycle"
            placeholder="单位：kg CO2"
          />
        </a-form-item>
        <a-form-item label="员工总排放 - 工作碳排放" name="employeeEmissionWork">
          <a-input v-model="formData.employeeEmissionWork" placeholder="单位：kg CO2" />
        </a-form-item>
        <a-form-item label="员工总排放 - 非工作碳排放" name="employeeEmissionNonWork">
          <a-input
            v-model="formData.employeeEmissionNonWork"
            placeholder="单位：kg CO2"
          />
        </a-form-item>
        <a-form-item label="账户余额" name="accountBalance">
          <a-input v-model="formData.accountBalance" placeholder="单位：kg CO2" />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-space>
</template>

<script setup>
import { message } from "ant-design-vue";
import { reactive, ref } from "vue";
const data = reactive([
  {
    name: "企业A",
    directEmissionFuel: "5000 kg",
    indirectEmissionElectricity: "10000 kg",
    productionEmissionMaterials: "20000 kg",
    supplyChainEmissionSuppliers: "15000 kg",
    disposalEmissionWaste: "8000 kg",
    employeeEmissionWork: "12000 kg",
  },
  {
    name: "企业B",
    directEmissionFuel: "6000 kg",
    indirectEmissionElectricity: "12000 kg",
    productionEmissionMaterials: "22000 kg",
    supplyChainEmissionSuppliers: "17000 kg",
    disposalEmissionWaste: "9000 kg",
    employeeEmissionWork: "13000 kg",
  },
]);

const columns = [
  { title: "企业名称", dataIndex: "name", key: "name", align: "center" },
  {
    title: "直接排放 - 燃料燃烧",
    dataIndex: "directEmissionFuel",
    key: "directEmissionFuel",
    align: "center",
  },
  {
    title: "间接排放 - 电力使用",
    dataIndex: "indirectEmissionElectricity",
    key: "indirectEmissionElectricity",
    align: "center",
  },
  {
    title: "生产排放 - 原材料使用",
    dataIndex: "productionEmissionMaterials",
    key: "productionEmissionMaterials",
    align: "center",
  },
  {
    title: "供应链排放 - 供应商排放",
    dataIndex: "supplyChainEmissionSuppliers",
    key: "supplyChainEmissionSuppliers",
    align: "center",
  },
  {
    title: "废弃处置排放 - 废弃物产生",
    dataIndex: "disposalEmissionWaste",
    key: "disposalEmissionWaste",
    align: "center",
  },
  {
    title: "员工总排放 - 工作碳排放",
    dataIndex: "employeeEmissionWork",
    key: "employeeEmissionWork",
    align: "center",
  },
  { title: "操作", key: "action", slots: { customRender: "action" }, align: "center" },
];

const formData = reactive({
  name: "",
  directEmissionFuel: "",
  directEmissionIndustry: "",
  directEmissionOther: "",
  indirectEmissionElectricity: "",
  indirectEmissionHeat: "",
  indirectEmissionOther: "",
  productionEmissionMaterials: "",
  productionEmissionProcess: "",
  productionEmissionTransport: "",
  supplyChainEmissionSuppliers: "",
  supplyChainEmissionTransport: "",
  disposalEmissionWaste: "",
  disposalEmissionRecycle: "",
  employeeEmissionWork: "",
  employeeEmissionNonWork: "",
  accountBalance: "",
});

const isModalVisible = ref(false);

const handleOk = () => {
  const index = data.findIndex((item) => item.name === formData.name);
  if (index !== -1) {
    Object.assign(data[index], formData);
  } else {
    data.push({ ...formData });
  }
  resetForm();
  isModalVisible.value = false;
  message.success("操作成功");
};

const handleCancel = () => {
  resetForm();
  isModalVisible.value = false;
};

const addNewAccount = () => {
  resetForm();
  isModalVisible.value = true;
};

const edit = (record) => {
  Object.assign(formData, record);
  isModalVisible.value = true;
};
const deleteRecord = (record) => {
  const index = data.findIndex((item) => item.name === record.name);
  if (index !== -1) {
    data.splice(index, 1);
    message.success("删除成功");
  }
};

const resetForm = () => {
  Object.assign(formData, {
    name: "",
    directEmissionFuel: "",
    directEmissionIndustry: "",
    directEmissionOther: "",
    indirectEmissionElectricity: "",
    indirectEmissionHeat: "",
    indirectEmissionOther: "",
    productionEmissionMaterials: "",
    productionEmissionProcess: "",
    productionEmissionTransport: "",
    supplyChainEmissionSuppliers: "",
    supplyChainEmissionTransport: "",
    disposalEmissionWaste: "",
    disposalEmissionRecycle: "",
    employeeEmissionWork: "",
    employeeEmissionNonWork: "",
    accountBalance: "",
  });
};
</script>

<style scoped>
a-table {
  margin-bottom: 20px;
}

a-button {
  margin-top: 20px;
}

a-modal .ant-modal-content {
  border-radius: 8px;
}

a-form-item {
  margin-bottom: 15px;
}
</style>
